<template>
	<view class="app_index">
		<u-navbar :isFixed="true" title="登录" :borderBottom="false"></u-navbar>
		<image :src="backimg" class="bcimage" mode="scaleToFill"></image>
		<view class="mask">
			<view class="app_welcome">
				<!-- <text class="app_halo">{{welcomeData.title}}</text>
				<text class="app_content">{{welcomeData.content}}</text> -->
				<image src="https://image.malldx.com/11e3b2b6105ec1d31a671d432ea09649.jpg" mode="scaleToFill"></image>
			</view>
			<view class="app_door">
				<view class="button" @click="gologin" v-if="!phone_accredit">微信一键登录</view>
				<view class="getphone" v-if="phone_accredit">
					<view class="flex_align phoneNumber">
						<input class="mobile" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号" />
					</view>
					<view class="flex_align codeNumber">
						<input type="number" v-model="code" class="code" placeholder="请输入验证码" />
						<view class="obtain" v-bind:class="{ time: wait_timer > 0 }" @click="getMobileCode()">
							{{ getMobileCodeText() }}
						</view>
					</view>

					<view class="bound" @click="phonelogin"> 绑定手机号 </view>
				</view>
				<view url="/home/login/phonelogin" @click="abbc" v-model="codes" hover-class="none" class="phone_login">手机验证登录
				</view>
				<view class="app_reading">

					<u-checkbox-group>
						<u-checkbox v-model="checked"  @change="radioChange"></u-checkbox>
					</u-checkbox-group>
					您是否同意
					<text @click="readingo('用户协议',1)">《用户协议》</text>和
					<text @click="readingo('隐私协议',2)">《隐私协议》</text>
				</view>
				<view @click="$plug.copyText(backgroundDatas)"
					　style="position: fixed;width: 50rpx;height: 50rpx;right: 0;bottom: 100rpx;z-index: 50;"></view>
			</view>
		</view>

	</view>
</template>

<script>
	var _this, shak;
	import md5 from "../../static/js/md5.js"
	export default {
		data() {
			return {

				welcomeData: {
					title: '您好',
					content: '欢迎使用树之道'
				},
				mobile: '',
				codes: '',
				backimg: "",
				phone_accredit: false,
				token: "",
				session_key: "",
				client_uid: "",
				result: [],
				mathstr: "",
				time: new Date().getTime(),
				// 后台需要的数据集合
				backgroundDatas: "",
				// 倒计时
				wait_timer: false,
				// 手机号
				mobile: "",
				// 验证码
				code: "",
				value:'0',
				checked:false

			}

		},
		onLoad() {
			// 防止多次跳入登录
			setTimeout(function() {
				uni.setStorageSync("gologin", false)
			}, 2000);
			_this = this
			_this.getdata()
		},
		methods: {
			// 获取数据
			getdata() {
				_this.$api.get("loginback", {}).then(data => {
					_this.backimg = data
				});
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e,_this.checked);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},
			readingo: function(name, type) {
				uni.navigateTo({
					url: "/home/login/reading?name=" + name + "&type=" + type
				})
			},

			tobingding: function() {
				uni.navigateTo({
					url: "/home/login/bingding"
				})
			},
			//随机字符串
			getStr(length) {
				let str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
				let result = '';
				for (let i = length; i > 0; --i)
					result += str[Math.floor(Math.random() * str.length)];

				_this.mathstr = result
				_this.result.push(result);
			},
			abbc(){
				if(!_this.checked){
					uni.showToast({
						title: '请阅读同意协议',
						icon: 'success',
						duration: 2000,
						success: function() {
					
						},
					})
					return false;
				}
				uni.navigateTo({
					url: "/home/login/phonelogin"
				})
			},
			// 登录
			gologin() {

				let _this = this;
				console.log(_this.checked)
				if(!_this.checked){
					uni.showToast({
						title: '请阅读同意协议',
						icon: 'success',
						duration: 2000,
						success: function() {
					
						},
					})
					return false;
				}
				
				_this.click_shake(() => {
					uni.getProvider({
						service: 'oauth',
						success: function(res) {
							//微信登录
							if (res.provider.includes('weixin')) {
								uni.login({
									provider: 'weixin',
									success(res) {
										_this.authResult = res.authResult
										wx.getUserInfo({
											provider: 'weixin',
											success: function(res) {
												_this.user = res.userInfo
												console.log(JSON.stringify(res
													.userInfo))
												_this.backgroundDatas = JSON
													.stringify(res.userInfo)
												let userInfo = res.userInfo;
												// let userInfo = {"openId":"oHZ9r50kJk7_apZFZath0e7eZVGw","nickName":"洗格","gender":1,"city":"","province":"","country":"圣诞岛","avatarUrl":"https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTK0kt9KiaztfWqYRqahcFdq8kvce2kntFcbqNvDkQoShib13kHqAJ4iaYphq5fWaZRXkHib1lsY3SiaNRA/132","unionId":"oVA7q6kSrhImKkAZW4gsN3VEhtlE"}
												_this.$api.post(
													"wechatauthlogin", {
														openId: userInfo
															.openId,
														nickName: userInfo
															.nickName,
														gender: userInfo
															.gender,
														city: userInfo.city,
														province: userInfo
															.province,
														country: userInfo
															.country,
														avatarUrl: userInfo
															.avatarUrl,
														unionId: userInfo
															.unionId,
														device: uni
															.getStorageSync(
																'cid'),
													}).then(data => {
													console.log(data)
													_this.getStr(8)
													_this.result.push(_this
														.time)
													_this.result.push(data
														.token);
													_this.result = _this
														.result.sort()
														.join('')
													let str = md5.hex_md5(
														_this.result)
													let md5str = str
														.toUpperCase()
													uni.setStorageSync("t",
														_this.time)
													uni.setStorageSync("r",
														_this.mathstr)
													uni.setStorageSync("s",
														md5str)
													uni.setStorageSync(
														"user",
														userInfo)
													if (data.mobile != 0) {
														uni.setStorageSync(
															"client_uid",
															data
															.client_uid
														)
														uni.setStorageSync(
															"token",
															data.token)
														uni.showToast({
															title: '登录成功',
															icon: 'success',
															duration: 2000,
															success: function() {
																setTimeout
																	(function() {
																			uni.reLaunch({
																				url: '/pages/index/index'
																			})
																		},
																		1000
																	);
															},
														})
													} else {
														uni.showToast({
															title: "请授权手机号",
															icon: "none"
														})
														_this.token = data
															.token
														_this
															.phone_accredit =
															true
														_this.session_key =
															data
															.session_key,
															_this.openid =
															data.openid
														_this.client_uid =
															data.client_uid
														_this.unionId =
															data.unionid
													}
												});
											}
										})
									}
								})
							}
						}
					});
				})
			},
			// 验证码
			getMobileCode: function() {
				_this.$api.get("smsSendCode", {
					mobile: this.mobile
				}).then(data => {
					if (this.wait_timer > 0) {
						return false;
					}
					_this.wait_timer = 59;
					var timer_interval = setInterval(function() {
						if (_this.wait_timer > 0) {
							_this.wait_timer--;
						} else {
							clearInterval(timer_interval);
						}
					}, 1000);
				});
			},

			getMobileCodeText: function() {
				if (this.wait_timer > 0) {
					return this.wait_timer + 's后获取';
				}

				if (this.wait_timer === 0) {
					return '重新获取';
				}

				if (this.wait_timer === false) {
					return '获取验证码';
				}
			},
			// 手机登录
			phonelogin() {
				let data = [{
					value: _this.mobile,
					type: 1,
					title: "请输入手机号"
				}, {
					value: _this.mobile,
					type: 3,
					title: "手机号格式有误"
				}, {
					value: _this.code,
					type: 1,
					title: "请填写验证码"
				}]
				if (_this.$plug.verify(data)) {
					_this.click_shake(() => {
						_this.$api.post("bindmobile", {
							mobile: _this.mobile,
							code: _this.code,
							openid: _this.openid,
							unionId: _this.unionId,
						}).then(data => {
							console.log(data)
							uni.setStorageSync("client_uid", _this.client_uid)
							uni.setStorageSync("token", _this.token)
							// 返回店铺详情就刷新店铺页面
							uni.setStorageSync("refresh", "1")
							wx.navigateBack({
								delta: 1
							})
						});
					})
				}
			},
			// 防抖点击
			click_shake(fn) {
				if (!_this.shake) {
					fn && typeof fn === 'function' && fn()
					_this.shake = true
					setTimeout(function() {
						_this.shake = false
					}, 500)
				}
			},

		},

	}
</script>

<style lang="scss" scoped>
	.app_index {
		width: 100%;
		height: 100vh;
		position: fixed;
		left: 0;
		top: 0;

		.bcimage {
			width: 100%;
			height: 100%;
			z-index: -1;
			position: absolute;
			left: 0;
		}

		.mask {
			width: 100%;
			height: 100vh;
			position: fixed;
			left: 0;
			top: 0;
			background-color: rgba($color: #000000, $alpha: 0.5);

			.app_welcome {
				margin-top: 60%;
				padding: 0 200rpx;
				display: flex;
				flex-direction: column;

				.app_halo {
					font-size: 70rpx;
					color: #fff;
					font-weight: bold;
				}

				.app_content {
					font-size: 40rpx;
					color: #fff;
					margin-top: 40rpx;
				}

				image {
					width: 350rpx;
					height: 350rpx;
				}
			}

			.app_door {
				width: 100%;
				padding: 200rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: absolute;
				bottom: 0;

				.button {
					width: 446rpx;
					margin: 0 auto;
					background: #38be8c;
					border-radius: 39px;
					line-height: 78rpx;
					color: #FFFFFF;
					font-size: 30rpx;
					font-weight: bold;
					text-align: center;
				}

				.phone_login {
					margin-top: 53rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #38be8c;
				}

				.app_reading {
					margin-top: 40rpx;
					font-size: 24rpx;
					color: #d5d5d5;

					text {
						color: rgb(56, 190, 140);
					}
				}

				.getphone {
					width: 100%;
					padding: 0 20vw;

					.phoneNumber {
						background-color: #FFFFFF;
						border-radius: 10rpx;
						padding: 10rpx;

						.mobile {
							font-size: 32rpx;
							width: 100%;
							padding: 0 10rpx;
							line-height: 60rpx;
							height: 60rpx;
						}
					}

					.codeNumber {
						margin-top: 40rpx;

						.code {
							width: 240rpx;
							text-align: center;
							background-color: #FFFFFF;
							border-radius: 10rpx;
							padding: 10rpx;
							height: 60rpx;
							font-size: 28rpx;
						}

						.obtain {
							background-color: #38be8c;
							flex: 1;
							margin-left: 20rpx;
							line-height: 60rpx;
							text-align: center;
							border-radius: 10rpx;
							color: #FFFFFF;
						}
					}
				}

				.bound {
					width: 100%;
					background-color: #38be8c;
					line-height: 80rpx;
					text-align: center;
					font-size: 28rpx;
					font-weight: bold;
					margin-top: 40rpx;
					border-radius: 40rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
